﻿@using System.Timers;
@using Timer = System.Timers.Timer;

<div class="text-center" >
	<MProgressCircular Value="_value" Size="100" Width="15" Rotate="90" Color="lime">@_value</MProgressCircular>
	<MProgressCircular Value="_value" Size="100" Width="15" Rotate="180" Color="brown">@_value</MProgressCircular>
	<MProgressCircular Value="_value" Size="100" Width="15" Rotate="270" Color="red">@_value</MProgressCircular>
	<MProgressCircular Value="_value" Size="100" Width="15" Rotate="360" Color="teal">@_value</MProgressCircular>
</div>

@code
{
    private StringNumber _value = 0;
    protected Timer Timer { get; set; }
    protected override void OnInitialized()
    {
        if (Timer == null)
        {
            Timer = new Timer
            {
                Interval = 1000
            };
            Timer.Elapsed += Timer_Elapsed;
            Timer.Start();
        }
    }
    
    private async void Timer_Elapsed(object sender, ElapsedEventArgs e)
    {
        await InvokeAsync(() =>
        {
            var value = _value.ToInt32();
            if (value >= 100)
            {
                Timer.Stop();
                _value = 0;
                Timer.Start();
            }
            else
            {
                _value = value + 10;
            }
    
            StateHasChanged();
        });
    }
}

<style>
	.m-progress-circular {
      margin: 1rem;
    }
</style>